﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AlbumsAdmin.aspx.cs" Inherits="AdminGallary_AlbumsAdmin" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
    <script src="../js/blocksit.min.js" type="text/javascript"></script>
    <link href="../css/main.css" rel="stylesheet" type="text/css" />
  
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <link href="../css/style.css" rel="stylesheet"  media='screen'" />
   
    <style type="text/css">
        .c-SetItemTile .isSelected .selectionTab
        {
            position: absolute;
            display: block;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-top: 42px solid #094AB2;
            border-left: 42px solid transparent;
        }
        
        
        .c-SetItemTile .isSelected .selectionBorder
        {
            position: absolute;
            display: block;
            border: 3px solid #094AB2 !important;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        
        
        .c-SetItemTile a:hover .selectBox, .c-SetItemTile .isSelected .selectBox
        {
            visibility: visible;
            opacity: 1;
        }
        
        .c-SetItemTile .anySelected .selectArea
        {
            width: 100%;
            height: 100%;
        }
        
        
        .c-ImageTile
        {
            display: inline-block;
            position: relative;
            overflow: hidden;
        }
        .selectTri
        {
            position: absolute;
            top: 0;
            right: 4px;
            border-top: 30px solid #000;
            border-right: 30px solid #000;
            border-bottom: 30px solid transparent;
            border-left: 30px solid transparent;
            display:none;
        }
        .item
        {
            position: relative;
            vertical-align: top;
            text-decoration: none;
        }
        .item input[type="checkbox"]
        {
            position: absolute;
            top: 6px;
            right: 10px;
            display: none;
            text-decoration: none;
        }
        .item:hover input[type="checkbox"]
        {
            display: block;
        }
    </style>
    <link href="../css/NYKpPzcj59cFilesCSS2.css" rel="stylesheet" type="text/css" />
    <link href="../css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" />
    <script src="../js/jquery.js" type="text/javascript"></script>
    <link href="../css/metro.teal.css" rel="stylesheet" type="text/css" />
    <title>Albums</title>

    <script type="text/javascript">

        $(document).ready(function () {




            $(".editDelete").click(function () {


                $('[id$=sideDiv]').animate({ "margin-right": "-220px" }, { duration: 1000 });

            });
            








            $(".class1").click(function () {


                $('input:checked').parent().parent().parent().animate({ opacity: 0 }, 1000).animate({ width: 0, "margin": 0 }, 1000).fadeOut(10);

            });


            $(".item input[type='checkbox']").click(function () {
                if ($("#" + this.id).attr("checked")) {
                    $("#" + this.id).prev().css("display", "block");
                    $('[id$=sideDiv]').animate({ "margin-right": "0" }, { duration: 1000 });
                    $("#" + this.id).css("display", "block");

                    // info();

                }
                else {

                    if ($(".item input[type='checkbox']:checked").length == 0)
                        $('[id$=sideDiv]').animate({ "margin-right": "-220px" }, { duration: 1000 });
                    $("#" + this.id).prev().css("display", "none");
                    $("#" + this.id).css("display", "");
                    //                    $('.close').click();
                }








            });

            function info() {

                // where it starts at -65 and where it ends 
                var startPos = $('#info-bar').css('top');
                var endPos = 0;
                $('#info-bar').stop();
                $('#info-bar').css({ top: startPos });
                $('#info-bar').animate({ top: endPos }, 800);
            }
            // doing it with delay 
            // setTimeout(info, 2000);
            // info();

            $('.close').click(function () {
                var startPos = $('#info-bar').css('top');
                var endPos = '-65px';
                $('#info-bar').stop();
                $('#info-bar').css({ top: startPos });
                $('#info-bar').animate({ top: endPos }, 700);
            });


        });
        
    </script>
</head>
<body>
    <form id="form1" runat="server">

    <script src="../Scripts/functions.js" type="text/javascript"></script> 
    
     
<!-- Content -->
<section id="wrapper2">
<div id="container" >
 






 <div  class="grid" style="float: left">
    <a class="item " href="#">
		
		<div class="imgholder">
       <a href="createAlbum.aspx"><img src="../images/add.png" /></a>
			
		</div>
		<strong> </strong>
		<p> </p>
		<div class="meta"> </div>
         <br clear="both" />
		
          </a>
	</div>






	<div class="grid" style="float: left">
    <a class="item " href="#">
		<div class="imgholder">
         <div class="selectTri">
                </div>
                <input id="Checkbox2" type="checkbox" />
			<img src="../images/015.jpg" />
		</div>
		<strong>Album 1</strong>
		<p>Event:National Day </p>
		<div class="meta">Khalifa University</div>
         <br clear="both" />
          </a>
	</div>




    <div class="grid" style="float: left">
    <a class="item " href="#">
		<div class="imgholder">
         <div class="selectTri">
                </div>
                <input id="Checkbox1" type="checkbox" />
			<img src="../images/015.jpg" />
		</div>
		<strong>Album 2</strong>
		<p>Event:National Day </p>
		<div class="meta">Khalifa University</div>
         <br clear="both" />
          </a>
	</div>



    <div class="grid" style="float: left">
    <a class="item " href="#">
		<div class="imgholder">
         <div class="selectTri">
                </div>
                <input id="Checkbox3" type="checkbox" />
			<img src="../images/015.jpg" />
		</div>
		<strong>Album 3</strong>
		<p>Event:National Day </p>
		<div class="meta">Khalifa University</div>
         <br clear="both" />
          </a>
	</div>




    <div class="grid" style="float: left">
    <a class="item " href="#">
		<div class="imgholder">
         <div class="selectTri">
                </div>
                <input id="Checkbox4" type="checkbox" />
			<img src="../images/015.jpg" />
		</div>
		<strong>Album 4</strong>
		<p>Event:National Day </p>
		<div class="meta">Khalifa University</div>
         <br clear="both" />
          </a>
	</div>
    </div>

</section>






















        
    <div  id="sideDiv" class="tile one tealbg" style="width: 200px; height:100%; position:fixed; margin-right:-220px; right:0; top:0px; border: 1px solid #000; ">
    <div style="position:absolute; right:0; cursor:pointer" class="editDelete">x</div>
    <div id="albumTitle"> Edit Album </div> 
     
    <div align="left" >
    <br />
    Album Name:
    <input id="Text1" type="text" style="width:150px;" />
    <br />
    Event Title:
    <input id="Text2" type="text"  style="width:150px;" />
    <br />
    <br />
    <input type="button" value="Save Changes" />

    <br />
    <br />

    </div>

    <div class="class1"> 
       <input  type="button" value="Delete Photo" /> 
    </div>
 
    
    
    </div>
    </div>
    </form>
</body>
</html>
